<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 1000px;
            border: 1px solid #000;
            background-color: #feeeed;
            float: left;
        }
        #addbox{
            width: 300px;
            padding: 20px;
            background-color: skyblue;
            position: fixed;
            right: 0px;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <div id="addbox">
        <form name="addform" onsubmit="return addData()">
            姓名：<input type="text" name="name" >
            性别：<input type="radio" name="sex" value="0">女
                <input type="radio" name="sex" value="1" checked> 男
                <input type="radio" name="sex" value="2">保密
            年龄：<input type="text" name="age">
            <button>提交</button>
        </form>

    </div>
        
        <script>
            function addData(){
                // 各种获取
                var name = document.addform.name.value;
                var sex = document.addform.sex.value;
                var age = document.addform.age.value;

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function (){
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            console.log(xhr.responseText);
                            if(xhr.responseText>0){
                                var tr = table.insertRow(table.rows.length);
                                tr.insertCell(0).innerHTML = xhr.responseText;
                                tr.insertCell(1).innerHTML = name;
                                tr.insertCell(2).innerHTML = sex;
                                tr.insertCell(3).innerHTML = age;
                                tr.insertCell(4).innerHTML = '';
                                alert('搞上了');
                            } else{
                                alert('没搞上');
                            }
                        }
                    }
                }
                xhr.open('post','./php/5.php',true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send('name='+name+'&sex='+sex+'&age='+age);
                return false;
            }
            loadHtml();
            function loadHtml(){
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function (){
                    if(xhr.readyState==4){
                        if(xhr.status == 200){
                            // console.log(xhr.responseText);
                        box.innerHTML = '';
                        var jsonStr = xhr.responseText;
                        var obj = JSON.parse(jsonStr);
                        console.log(obj);

                        // 生成表格
                        var table = document.createElement('table');
                        table.width = 1000;
                        table.border = 1;
                        table.cellPadding = 5;
                        table.cellSpacing = 0;
                        table.id = 'table';
                        box.appendChild(table);

                        //添加表头
                        var tr = table.insertRow(0);
                        addTH(tr,['序号','名字','性别','年龄','province']);

                        // 向表格添加数据
                        for (var i = 0; i < obj.length; i++) {
                            var tr = table.insertRow(i+1);
                            tr.insertCell(0).innerHTML = obj[i].id;
                            tr.insertCell(1).innerHTML = obj[i].name;
                            tr.insertCell(2).innerHTML = obj[i].sex;
                            tr.insertCell(3).innerHTML = obj[i].age;
                            tr.insertCell(4).innerHTML = obj[i].province;
                        }
                    }
                }
            }
            xhr.open('get','./php/4.php',true);
            xhr.send();
        }

        function addTH(tr,data){
            for (var i = 0; i < data.length; i++) {
                var th = document.createElement('th');
                th.innerHTML = data[i];
                tr.appendChild(th);
            }
        }




        </script>


</body>
</html>